<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>COLO</title>
  </head>
  <body>
    <noscript>
      <strong
        >We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
        properly without JavaScript enabled. Please enable it to
        continue.</strong
      >
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <div
      id="google_translate_element"
      style="
        position: fixed;
        top: 0;
        right: 0;
        z-index: 9999;
        background-color: #ffffff;
        padding: 3px;
        border: 1px solid #999;
        border-radius: 5px;
        width: 125px;
      "
    >
      <!-- Google Translate -->
      <script type="text/javascript">
        function googleTranslateElementInit() {
          new google.translate.TranslateElement(
            {
              pageLanguage: "en",
              includedLanguages: "ko,zh-CN,it,zh-TW,ja,en",
              layout: google.translate.TranslateElement.InlineLayout.SIMPLE,
            },
            "google_translate_element",
          );
        }
      </script>
      <script
        type="text/javascript"
        src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"
      ></script>
    </div>
    <script>
      let nowText = "";
      const baseText = "选择语言";
      // 监听语言变化的函数
      function onLanguageChanged(dom) {
        if (dom && dom.addedNodes.length > 0) {
          const newNodeData = dom.addedNodes[0].data;
          const eventDetail = newNodeData !== baseText; // Check condition
          window.dispatchEvent(
            new CustomEvent("languageChanged", { detail: eventDetail }),
          );
        }
      }

      // 使用 MutationObserver 监听 Google Translate 的变化
      const observer = new MutationObserver((mutationsList) => {
        console.log(mutationsList[0].addedNodes[0].data);
        for (const mutation of mutationsList) {
          if (mutation.type === "childList") {
            onLanguageChanged(mutation);
          }
        }
      });

      // 开始观察 google_translate_element 元素的变化
      const targetNode = document.getElementById("google_translate_element");
      observer.observe(targetNode, { childList: true, subtree: true });
    </script>
  </body>
</html>
